<template>
  <div>
    <el-dialog
      :visible.sync="dialog.add"
      :close-on-click-modal="false"
      title="添加"
      width="80%"
      append-to-body
      @closed="dialogClosed('addForm')"
    >
      <el-form ref="addForm" :model="form" label-width="120px" :rules="validateRules">
        <el-row>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
	<el-form-item label="父菜单名称" prop="parentMetaTitle"><el-input v-model="form.parentMetaTitle" placeholder="请输入父菜单名称" disabled clearable />
              <el-button
                type="text"
                size="small"
                @click="showJoinSearch({
                searchDialog: 'SysMenuParentMain'
              })"
              >选择父菜单名称</el-button>
</el-form-item>
	</el-col>
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
	<el-form-item label="菜单路径" prop="path">
	<el-input v-model="form.path" placeholder="请输入菜单路径" clearable/>
</el-form-item>
	</el-col>
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
	<el-form-item label="英文名称" prop="name">
	<el-input v-model="form.name" placeholder="请输入英文名称" clearable/>
</el-form-item>
	</el-col>
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
	<el-form-item label="中文名称" prop="metaTitle">
	<el-input v-model="form.metaTitle" placeholder="请输入中文名称" clearable/>
</el-form-item>
	</el-col>
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
	<el-form-item label="重定向地址" prop="redirect">
	<el-input v-model="form.redirect" placeholder="请输入重定向地址" clearable/>
</el-form-item>
	</el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
	<el-form-item label="组件" prop="component">
	<el-input type="textarea" v-model="form.component" placeholder="请输入组件" clearable/>
</el-form-item>
	</el-col>
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
	<el-form-item label="是否隐藏" prop="hidden"><el-select
                v-model="form.hidden"
                placeholder="请选择是否隐藏"
                clearable
                style="width: 100%;"
              >
                <el-option
                  v-for="item in selects.hiddenSelect"
                  :value="item.value"
                  :key="item.value"
                  :label="item.displayValue"
                ></el-option>
              </el-select>
</el-form-item>
	</el-col>
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
	<el-form-item label="总是显示" prop="alwaysShow"><el-select
                v-model="form.alwaysShow"
                placeholder="请选择总是显示"
                clearable
                style="width: 100%;"
              >
                <el-option
                  v-for="item in selects.alwaysShowSelect"
                  :value="item.value"
                  :key="item.value"
                  :label="item.displayValue"
                ></el-option>
              </el-select>
</el-form-item>
	</el-col>
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
	<el-form-item label="菜单图标" prop="metaIcon">
	<el-input v-model="form.metaIcon" placeholder="请输入菜单图标" clearable/>
</el-form-item>
	</el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
	<el-form-item label="可访问角色" prop="metaRoles">
	<el-input type="textarea" v-model="form.metaRoles" placeholder="请输入可访问角色" clearable/>
</el-form-item>
	</el-col>
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
	<el-form-item label="是否隐藏面包屑" prop="metaBreadcrumb"><el-select
                v-model="form.metaBreadcrumb"
                placeholder="请选择是否隐藏面包屑"
                clearable
                style="width: 100%;"
              >
                <el-option
                  v-for="item in selects.metaBreadcrumbSelect"
                  :value="item.value"
                  :key="item.value"
                  :label="item.displayValue"
                ></el-option>
              </el-select>
</el-form-item>
	</el-col>
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
	<el-form-item label="是否固定在TagView" prop="metaAffix"><el-select
                v-model="form.metaAffix"
                placeholder="请选择是否固定在TagView"
                clearable
                style="width: 100%;"
              >
                <el-option
                  v-for="item in selects.metaAffixSelect"
                  :value="item.value"
                  :key="item.value"
                  :label="item.displayValue"
                ></el-option>
              </el-select>
</el-form-item>
	</el-col>
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
	<el-form-item label="是否缓存" prop="metaNoCache"><el-select
                v-model="form.metaNoCache"
                placeholder="请选择是否缓存"
                clearable
                style="width: 100%;"
              >
                <el-option
                  v-for="item in selects.metaNoCacheSelect"
                  :value="item.value"
                  :key="item.value"
                  :label="item.displayValue"
                ></el-option>
              </el-select>
</el-form-item>
	</el-col>
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
	<el-form-item label="菜单等级" prop="menuLevel">
	<el-input-number v-model="form.menuLevel" placeholder="请输入菜单等级" clearable style="width: 100%;"/>
</el-form-item>
	</el-col>
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
	<el-form-item label="菜单排序" prop="menuOrder">
	<el-input-number v-model="form.menuOrder" placeholder="请输入菜单排序" clearable style="width: 100%;"/>
</el-form-item>
	</el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
	<el-form-item label="菜单说明" prop="description">
	<el-input type="textarea" v-model="form.description" placeholder="请输入菜单说明" clearable/>
</el-form-item>
	</el-col>

        </el-row>
      </el-form>
      <div slot="footer">
        <el-button @click="dialog.add = false">取消</el-button>
        <el-button type="primary" @click="add" :loading="loading.add">添加</el-button>
      </div>
    </el-dialog>
    <el-dialog
      :visible.sync="dialog.edit"
      :close-on-click-modal="false"
      title="修改"
      width="80%"
      append-to-body
      @closed="dialogClosed('editForm')"
    >
      <el-form ref="editForm" :model="form" label-width="120px" :rules="validateRules">
        <el-row>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
	<el-form-item label="父菜单名称" prop="parentMetaTitle"><el-input v-model="form.parentMetaTitle" placeholder="请输入父菜单名称" disabled clearable />
              <el-button
                type="text"
                size="small"
                @click="showJoinSearch({
                searchDialog: 'SysMenuParentMain'
              })"
              >选择父菜单名称</el-button>
</el-form-item>
	</el-col>
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
	<el-form-item label="菜单路径" prop="path">
	<el-input v-model="form.path" placeholder="请输入菜单路径" clearable/>
</el-form-item>
	</el-col>
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
	<el-form-item label="英文名称" prop="name">
	<el-input v-model="form.name" placeholder="请输入英文名称" clearable/>
</el-form-item>
	</el-col>
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
	<el-form-item label="中文名称" prop="metaTitle">
	<el-input v-model="form.metaTitle" placeholder="请输入中文名称" clearable/>
</el-form-item>
	</el-col>
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
	<el-form-item label="重定向地址" prop="redirect">
	<el-input v-model="form.redirect" placeholder="请输入重定向地址" clearable/>
</el-form-item>
	</el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
	<el-form-item label="组件" prop="component">
	<el-input type="textarea" v-model="form.component" placeholder="请输入组件" clearable/>
</el-form-item>
	</el-col>
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
	<el-form-item label="是否隐藏" prop="hidden"><el-select
                v-model="form.hidden"
                placeholder="请选择是否隐藏"
                clearable
                style="width: 100%;"
              >
                <el-option
                  v-for="item in selects.hiddenSelect"
                  :value="item.value"
                  :key="item.value"
                  :label="item.displayValue"
                ></el-option>
              </el-select>
</el-form-item>
	</el-col>
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
	<el-form-item label="总是显示" prop="alwaysShow"><el-select
                v-model="form.alwaysShow"
                placeholder="请选择总是显示"
                clearable
                style="width: 100%;"
              >
                <el-option
                  v-for="item in selects.alwaysShowSelect"
                  :value="item.value"
                  :key="item.value"
                  :label="item.displayValue"
                ></el-option>
              </el-select>
</el-form-item>
	</el-col>
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
	<el-form-item label="菜单图标" prop="metaIcon">
	<el-input v-model="form.metaIcon" placeholder="请输入菜单图标" clearable/>
</el-form-item>
	</el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
	<el-form-item label="可访问角色" prop="metaRoles">
	<el-input type="textarea" v-model="form.metaRoles" placeholder="请输入可访问角色" clearable/>
</el-form-item>
	</el-col>
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
	<el-form-item label="是否隐藏面包屑" prop="metaBreadcrumb"><el-select
                v-model="form.metaBreadcrumb"
                placeholder="请选择是否隐藏面包屑"
                clearable
                style="width: 100%;"
              >
                <el-option
                  v-for="item in selects.metaBreadcrumbSelect"
                  :value="item.value"
                  :key="item.value"
                  :label="item.displayValue"
                ></el-option>
              </el-select>
</el-form-item>
	</el-col>
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
	<el-form-item label="是否固定在TagView" prop="metaAffix"><el-select
                v-model="form.metaAffix"
                placeholder="请选择是否固定在TagView"
                clearable
                style="width: 100%;"
              >
                <el-option
                  v-for="item in selects.metaAffixSelect"
                  :value="item.value"
                  :key="item.value"
                  :label="item.displayValue"
                ></el-option>
              </el-select>
</el-form-item>
	</el-col>
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
	<el-form-item label="是否缓存" prop="metaNoCache"><el-select
                v-model="form.metaNoCache"
                placeholder="请选择是否缓存"
                clearable
                style="width: 100%;"
              >
                <el-option
                  v-for="item in selects.metaNoCacheSelect"
                  :value="item.value"
                  :key="item.value"
                  :label="item.displayValue"
                ></el-option>
              </el-select>
</el-form-item>
	</el-col>
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
	<el-form-item label="菜单等级" prop="menuLevel">
	<el-input-number v-model="form.menuLevel" placeholder="请输入菜单等级" clearable style="width: 100%;"/>
</el-form-item>
	</el-col>
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
	<el-form-item label="菜单排序" prop="menuOrder">
	<el-input-number v-model="form.menuOrder" placeholder="请输入菜单排序" clearable style="width: 100%;"/>
</el-form-item>
	</el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
	<el-form-item label="菜单说明" prop="description">
	<el-input type="textarea" v-model="form.description" placeholder="请输入菜单说明" clearable/>
</el-form-item>
	</el-col>

        </el-row>
      </el-form>
      <div slot="footer">
        <el-button @click="dialog.edit = false">取消</el-button>
        <el-button type="primary" @click="edit" :loading="loading.edit">修改</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as utils from '@/utils/utils'
import * as ResponseStatus from '@/utils/response-status'
import UploadImage from '@/components/Upload/UploadImage'
import Tinymce from '@/components/Tinymce'
const resUrl = process.env.VUE_APP_RES_URL
export default {
  name: 'SysMenuAddEdit',
  components: {
    UploadImage,
    Tinymce
  },
  data() {
    return {
      dialog: {
        add: false,
        edit: false
      },
      loading: {
        add: false,
        edit: false
      },
      form: {
        parentId: undefined,
parentMetaTitle: undefined,
parentIsActive: undefined,
path: undefined,
name: undefined,
metaTitle: undefined,
redirect: undefined,
component: undefined,
hidden: undefined,
alwaysShow: undefined,
metaIcon: undefined,
metaRoles: undefined,
metaBreadcrumb: undefined,
metaAffix: undefined,
metaNoCache: undefined,
menuLevel: undefined,
menuOrder: undefined,
description: undefined,

      },
      validateRules: {
        parentId: [
{type: 'integer', required: true, message: '此项为必须项', trigger: 'blur, change'}
],
parentMetaTitle: [
{type: 'string', required: true, message: '此项为必须项', trigger: 'blur'},
{type: 'string', min: 1, max: 100, message: '必须1-100个字符', trigger: 'blur'}
],
parentIsActive: [
{type: 'integer', required: true, message: '此项为必须项', trigger: 'blur, change'}
],
path: [
{type: 'string', required: true, message: '此项为必须项', trigger: 'blur'},
{type: 'string', min: 1, max: 100, message: '必须1-100个字符', trigger: 'blur'}
],
name: [
{type: 'string', required: true, message: '此项为必须项', trigger: 'blur'},
{type: 'string', min: 1, max: 100, message: '必须1-100个字符', trigger: 'blur'}
],
metaTitle: [
{type: 'string', required: true, message: '此项为必须项', trigger: 'blur'},
{type: 'string', min: 1, max: 100, message: '必须1-100个字符', trigger: 'blur'}
],
redirect: [
{type: 'string', min: 1, max: 100, message: '必须1-100个字符', trigger: 'blur'}
],
component: [
{type: 'string', required: true, message: '此项为必须项', trigger: 'blur'},
{type: 'string', min: 1, max: 500, message: '必须1-500个字符', trigger: 'blur'}
],
metaIcon: [
{type: 'string', required: true, message: '此项为必须项', trigger: 'blur'},
{type: 'string', min: 1, max: 100, message: '必须1-100个字符', trigger: 'blur'}
],
metaRoles: [
{type: 'string', min: 1, max: 500, message: '必须1-500个字符', trigger: 'blur'}
],
description: [
{type: 'string', min: 1, max: 500, message: '必须1-500个字符', trigger: 'blur'}
],

      },
      dataDictCodes: ['YES_NO',],
      selects: {
        parentIsActiveSelect: [],
hiddenSelect: [],
alwaysShowSelect: [],
metaBreadcrumbSelect: [],
metaAffixSelect: [],
metaNoCacheSelect: [],

      },
      resUrl: resUrl
    }
  },
  computed: {},
  mounted() {
        this.initDataDict()
  },
  methods: {
        initDataDict(){
 utils
      .getDataDict(this.dataDictCodes)
      .then(response => {
        if (response) {
          utils.getSelectDictItems({
            mainComponent: this,
            dataDictItems: response,
            dictCode: 'YES_NO',
            formProp: 'parentIsActive',
            dataProp: 'parentIsActiveSelect'
          })
utils.getSelectDictItems({
            mainComponent: this,
            dataDictItems: response,
            dictCode: 'YES_NO',
            formProp: 'hidden',
            dataProp: 'hiddenSelect'
          })
utils.getSelectDictItems({
            mainComponent: this,
            dataDictItems: response,
            dictCode: 'YES_NO',
            formProp: 'alwaysShow',
            dataProp: 'alwaysShowSelect'
          })
utils.getSelectDictItems({
            mainComponent: this,
            dataDictItems: response,
            dictCode: 'YES_NO',
            formProp: 'metaBreadcrumb',
            dataProp: 'metaBreadcrumbSelect'
          })
utils.getSelectDictItems({
            mainComponent: this,
            dataDictItems: response,
            dictCode: 'YES_NO',
            formProp: 'metaAffix',
            dataProp: 'metaAffixSelect'
          })
utils.getSelectDictItems({
            mainComponent: this,
            dataDictItems: response,
            dictCode: 'YES_NO',
            formProp: 'metaNoCache',
            dataProp: 'metaNoCacheSelect'
          })

        }
      })
      .catch(error => {})
        },
    dialogClosed(formRef) {
      this.$refs[formRef].resetFields()
      for (let key in this.form) {
        this.form[key] = undefined
      }
    },
    add() {
      this.$emit('add')
    },
    edit() {
      this.$emit('edit')
    },
    /** 触发父组件展示关联表数据的搜索对话框 */
    showJoinSearch(options) {
      this.$emit('showJoinSearchDialog', options)
    },
    imgUploadSuccess(formProp, url) {
      this.form[formProp] = url
    },
    imgRemoveSuccess(formProp) {
      this.form[formProp] = undefined
    }
  }
}
</script>

<style>
</style>